<template>
  <div class="personalIndexCheck">
    <el-breadcrumb separator="/" style="font-size:16px;height:30px;">
        <el-breadcrumb-item :to="{ path: '/expandCustomerIndexCheck' }">拓客指标考核</el-breadcrumb-item>
        <el-breadcrumb-item :to="{ path: '/areaIndexCheck' }">{{areaName}}</el-breadcrumb-item>
        <el-breadcrumb-item>{{regionName}}</el-breadcrumb-item>
    </el-breadcrumb>  
    <el-form :inline="true" class="demo-form-inline">
        <el-form-item label="姓名：" size="small">
            <el-input v-model="userName" placeholder="请输入姓名"></el-input>
        </el-form-item>
        <el-form-item>
            <el-button type="primary" @click="handleClick" id="monitorEnter" size="small">查询</el-button>
            <el-button type="" size="small" @click="handleReset">重置</el-button>
        </el-form-item>
    </el-form>
    <div class="total">
        <div class="total1">
            {{total.then}}
        </div>
        <div>
            <span class="tot1">
                <span>{{standardType == 1?'拜访量':'拓店量'}}指标：</span>
                <span>{{total.atPlan}}</span>
            </span>
            <span class="tot2">
                <span>实际完成指标：</span>
                <span>{{total.atReal}}</span>
            </span>
            <span>
                <span>完成率：</span>
                <span>{{total.atPercentage}}</span>
            </span>
        </div>
    </div>
    <div>
        <el-button type="success" size="small" @click="exportList">导出</el-button>
    </div>
    <div class="tal">
        <el-table
            :data="tableData"
            border
            stripe
            style="width: 100%">
            <el-table-column
            align='center'
            fixed
            prop="userName"
            label="姓名"
            width="120">
                <el-table-column
                align='center'
                fixed
                prop="userName"
                label="--"
                width="120">
                </el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="phone" label="手机号" width="120">
                <el-table-column align="center" prop="phone" label="--" width="120"></el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="standardType" label="指标" width="120">
                <el-table-column align="center" prop="standardType" label="--" width="120">
                    <template slot-scope="scope">{{scope.row.standardType == 1?'拜访量':'拓店量'}}</template>
                </el-table-column>
            </el-table-column>
            <el-table-column align="center" prop="asyear" label="年份" width="120">
            <el-table-column align="center" prop="asyear" label="--" width="120"></el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="yearDefe"
            label="本年剩余完成量"
            width="130"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="yearDefe"
                label="--"
                width="130"
                :formatter="moneyFormatter"
            ></el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="city"
            :label="`${mouth}`"
            width="180"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="city"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.atReal}}/{{scope.row.atPlan}}/{{scope.row.atPercentage == '1.0%'?'100%':scope.row.atPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="money"
            label="1月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="money"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.januaryReal}}/{{scope.row.januaryPlan}}/{{scope.row.januaryPercentage == '1.0%'?'100%':scope.row.januaryPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="2月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.februaryReal}}/{{scope.row.februaryPlan}}/{{scope.row.februaryPercentage == '1.0%'?'100%':scope.row.februaryPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="3月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.marchReal}}/{{scope.row.marchPlan}}/{{scope.row.marchPercentage == '1.0%'?'100%':scope.row.marchPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="4月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.aprilReal}}/{{scope.row.aprilPlan}}/{{scope.row.aprilPercentage == '1.0%'?'100%':scope.row.aprilPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="5月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.mayReal}}/{{scope.row.mayPlan}}/{{scope.row.mayPercentage == '1.0%'?'100%':scope.row.mayPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="6月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.juneReal}}/{{scope.row.junePlan}}/{{scope.row.junePercentage == '1.0%'?'100%':scope.row.junePercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="7月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.julyReal}}/{{scope.row.julyPlan}}/{{scope.row.julyPercentage == '1.0%'?'100%':scope.row.julyPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="8月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.augustReal}}/{{scope.row.augustPlan}}/{{scope.row.augustPercentage == '1.0%'?'100%':scope.row.augustPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="9月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.septemberReal}}/{{scope.row.septemberPlan}}/{{scope.row.septemberPercentage == '1.0%'?'100%':scope.row.septemberPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="10月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.octoberReal}}/{{scope.row.octoberPlan}}/{{scope.row.octoberPercentage == '1.0%'?'100%':scope.row.octoberPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="11月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.novemberReal}}/{{scope.row.novemberPlan}}/{{scope.row.novemberPercentage == '1.0%'?'100%':scope.row.novemberPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
            <el-table-column
            align="center"
            prop="zip"
            label="12月份"
            width="120"
            :formatter="moneyFormatter"
            >
            <el-table-column
                align="center"
                prop="zip"
                label="实际｜计划｜完成率"
                width="180"
                :formatter="moneyFormatter"
            >
            <template slot-scope="scope">
                {{scope.row.decemberReal}}/{{scope.row.decemberPlan}}/{{scope.row.decemberPercentage == '1.0%'?'100%':scope.row.decemberPercentage}}
            </template>
            </el-table-column>
            </el-table-column>
        </el-table>
    </div>
    <div class="pagination">
        <el-pagination
            background
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page.sync="pageData.pageNum"
        :page-size="pageData.pageSize"
        :page-sizes="[10, 20, 30, 40]"
        layout="total, prev, sizes, pager, next, jumper"
        :total='totalSize'>
        </el-pagination>
    </div>
  </div>
</template>
<script>
import util from '@/common/utils'
import api from "@/api/apiPath"
export default {
    name:'personalIndexCheck',
    data(){
        return {
            standardType:JSON.parse(window.sessionStorage.getItem('row')).standardType,
            mouth:'',
            userName:'',
            pageData:{
                pageNum:1,
                pageSize:10
            },
            tableData:[],
            totalSize:0,
            areaName:JSON.parse(window.sessionStorage.getItem('row')).areaName,
            regionName:this.$route.query.regionName,
            total:{}
        }
    },
    components:{},
    computed:{},
    mounted(){},
    created(){
        this.mouth = '1月-' + (new Date().getMonth()+1)+'月汇总'
        this.onSubmit()
        this.getTotal()
    },
    methods:{
        moneyFormatter(row, column, cellValue, index){
            if (cellValue) {
                return cellValue.toString().replace(/(\d)(?=(?:\d{3})+$)/g, '$1,')
            } else {
                return cellValue
            }
        },
      handleSizeChange(val) {
        this.pageData.pageSize = val
        this.onSubmit()
      },
      handleCurrentChange(val) {
        this.pageData.pageNum = val
        this.onSubmit()
      },
        // 汇总
        getTotal(){
        this.$axios.post('/spread/enaluate/enaluateThenRegion',{
            year:JSON.parse(window.sessionStorage.getItem('row')).year.slice(0,4),
            standardType:this.standardType,
            regionId:this.$route.query.regionId,
        }).then(res=>{
            this.total = res
            console.log(res);
            if(this.total.atPercentage == '1.0%'){
            this.total.atPercentage = '100%'
            }
        })
        },
        handleClick(){
            this.pageData.pageNum = 1
            this.onSubmit()
        },
      onSubmit() {
          this.$axios.post('spread/enaluate/enaluatePerson',{
            year:JSON.parse(window.sessionStorage.getItem('row')).year.slice(0,4),
            standardType:this.standardType,
            userName:this.userName,
            regionId:this.$route.query.regionId,
            pageSize:this.pageData.pageSize,
            pageNum:this.pageData.pageNum
          }).then(res=>{
            //   console.log(res);
            this.tableData = res.list
            this.totalSize = res.total
              
          })
      },
        //   重置
      handleReset(){
          this.userName = ''
      },
        //导出
        exportList() {
            let param = {
                year:JSON.parse(window.sessionStorage.getItem('row')).year.slice(0,4),
                standardType:this.standardType,
                userName:this.userName,
                regionId:this.$route.query.regionId,
            }
            let url = api.domain + '/spread/enaluate/enaluatePersonPut'
            this.axios({
                method: "post",
                url: url,
                data: param,
                headers: {
                "content-type": "application/json; charset=utf-8",
                token: sessionStorage.getItem("cmsUser")
                    ? JSON.parse(sessionStorage.getItem("cmsUser")).tokenId
                    : ""
                },
                responseType: "blob"
            }).then(res => {
                this.downloadFile(res.data);
            })
            .catch(res => {
            //全局拦截器原因,返回参数为catch'
                this.downloadFile(res.data);
            });
        },
        downloadFile(data) {
            if(!data){
                this.$message({
                    message: "导出错误",
                    type: "warning"
                });
                return
            }
            let url = window.URL.createObjectURL(new Blob([data]));
            let link = document.createElement("a");
            let fileName = `导出${util.getTimeString(new Date())}.xls`;
            link.style.display = "none";
            link.href = url;
            link.setAttribute("download", fileName);
            document.body.appendChild(link);
            link.click();
            URL.revokeObjectURL(link.href);
            document.body.removeChild(link);
            this.$message({
                message: "导出成功",
                type: "success"
            });
        },
    },
}
</script>

<style lang='stylus' scoped>
.personalIndexCheck{
    .el-form-item{
        vertical-align :middle;
    }
    .tal,.pagination{
        margin-top :20px;
    }
    .total{
        border:1px solid #DCDFE6;
        margin-bottom :20px;
        padding:20px;
    }
    .total1{
        margin-bottom :20px;
    }
    .tot1,.tot2{
        margin-right :50px;
    }

}

</style>